<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.active{
				font-size:24px;
				color:red;
			}
			.div_padding{
				padding:30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>{{message}}</div>
			<div>翻转后的字符：{{reverseMessage}}</div>
			<button @click="watchClick">点击侦听</button>
			
			<div v-bind:class="{active:objActive,'div_padding':objpadding}">试试class的对象绑定</div>
			<div v-bind:class="classObject">试试class的绑定不定义在模板里</div>
			<div v-bind:class="[arrActive,arrpadding]">试试class的数组绑定</div>
			<div v-bind:class="computedClass">试试class的绑定到要计算属性上</div>
			
			<template v-if="isshow">
				<h4>这是标题</h4>
				<div>这是内容标签</div>
				<ul>
					<li>再加点其它的内容一起显示</li>
					<li>再加点其它的内容一起显示</li>
					<li>再加点其它的内容一起显示</li>
				</ul>
			</template>
			
			<template v-if='issubmit'>
				<label>电话</label>
				<input type="text" placeholder="请输入电话号码" key="ipt_phone"/>
			</template>
			<template v-else>
				<label>邮箱</label>
				<input type="text" placeholder="请输入邮箱地址" key='ipt_email'/>
			</template>
			<button @click="submits">提交</button>
			<ol>
				<li v-for='(item,index) in items' v-bind:key='index'>{{item.tex}} ----{{index}}</li>
			</ol>
			
			<button @click="warn('试试点击事件',$event)">点击</button>
			<div>
				<input type="checkbox" id='jhon' v-model='checkbox' value="jhon"/>
				<label for="jhon">jhon</label>
				<input type="checkbox" id='jeck' v-model='checkbox' value='jeck'/>
				<label for="jeck">jeck</label>
				<input type="checkbox" id='sophie' v-model='checkbox' value='sophie'/>
				<label for="sophie">sophie</label>
				<p>选中的人{{checkbox}}</p>
			</div>
			
			<div>
				<input type="radio" id='jhon' v-model='radio' value="jhon"/>
				<label for="jhon">jhon</label>
				<input type="radio" id='jeck' v-model='radio' value='jeck'/>
				<label for="jeck">jeck</label>
				<input type="radio" id='sophie' v-model='radio' value='sophie' checked='checked'/>
				<label for="sophie">sophie</label>
				<p>选中的人{{radio}}</p>
			</div>
			
			<div>
				<select name="" v-model='selected'>
					<option disabled value="">请选择</option>
					<option value="江西12">江西</option>
					<option value="广州12">广州</option>
					<option value="上海12">上海</option>
				</select>
				<p>选中的地方：{{selected}}</p>
			</div>
			
			
			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				message:'这是显示的字符',
				reverMessage:'',
				objActive:true,
				objpadding:true,
				classObject:{
					active:false,
					div_padding:false
				},
				arrActive:'active',
				arrpadding:'div_padding',
				isshow:true,
				issubmit:true,
				items:[
					{tex:'累计可立即'},
					{tex:'烛空间看了就'},
					{tex:'空间为开发'}
				],
				checkbox:[],
				radio:'',
				selected:''
					
				
			},
			methods:{
				watchClick:function(event){
					console.log(event)
					this.message = '这已经不是原来 的消息了'
				},
				submits:function(){
					this.issubmit = !this.issubmit
				},
				warn:function(messages,event){
					if(event){
						alert(1)
						event.preventDefault();
					}
					alert(messages)
				}
			},
			computed:{
				reverseMessage:function(){
					this.reverMessage = this.message.split('').reverse().join('');
					return this.reverMessage
				},
				computedClass:function(){
					return {
						active:this.objActive,
						div_padding:this.objpadding
					}
				}
			},
			watch:{
				message:function(){
					alert('侦听到了变化')
				}
			}
		})
		
		
		
		
		/*
		 * 改变原数组
		 push()
		 pop()
		 shift()
		 unshift()
		 splice()
		 sort()
		 reverse()
		 
		 不改变原数组
		 slice()
		 concat()
		 filter()
		 
		 Vue.set(vm.userProfile,'age',27)
		 vm.$set(vm.userProfile,'age',27)
		 
		 事件修饰符
		 .stop
		 .prevent
		 .self
		 .once
		 .passive
		 .capture
		 .passive
		 
		 按键码
		 .enter
		 .tab
		 .delete
		 .esc
		 .space
		 .up
		 .down
		 .left
		 .right
		 
		 系统修饰符
		 .ctrl
		 .alt
		 .shift
		 .meta
		 .exact
		 
		 鼠标按钮修饰符
		 .left
		 .right
		 .middle
		 
		 
		 
		 
		 
		 * */
		
	</script>
</html>
